<template>
    <div style="margin-top: 50px">
        <header style="font-size: 20px;margin-left: 100px">编辑商品</header>
        <el-form :model="item" :rules="rules" ref="item" label-width="140px" style="width: 600px;margin-top: 50px"
                 size="small">
            <el-form-item label="商品名称：" prop="title">
                <el-input v-model="item.title"></el-input>
            </el-form-item>
            <el-form-item label="商品描述：" prop="sellPoint">
                <el-input
                        :autoSize="true"
                        v-model="item.sellPoint"
                        type="textarea"
                        placeholder="请输入内容"
                ></el-input>
            </el-form-item>
            <el-form-item label="商品价格：" prop="price">
                <el-input v-model="item.price"></el-input>
            </el-form-item>
            <el-form-item label="库存：" prop="num">
                <el-input v-model="item.num"></el-input>
            </el-form-item>
            <el-form-item label="限制数量：" prop="limitNum">
                <el-input v-model="item.limitNum"></el-input>
            </el-form-item>
<!--            <el-form-item label="商品图片和样式：" prop="detail">-->
<!--                asd-->
<!--            </el-form-item>-->
<!--            <el-form-item label="商品图片路径：" prop="image">-->
<!--                <el-upload-->
<!--                        action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                        list-type="picture-card"-->
<!--                        :on-preview="handlePictureCardPreview"-->
<!--                        :on-remove="handleRemove">-->
<!--                    <i class="el-icon-plus"></i>-->
<!--                </el-upload>-->
<!--                <el-dialog :visible.sync="dialogVisible">-->
<!--                    <img width="100%" :src="dialogImageUrl" alt="">-->
<!--                </el-dialog>-->
<!--            </el-form-item>-->
            <el-form-item label="商品板块id：" prop="cid">
                <el-input v-model="item.cid"></el-input>
            </el-form-item>
            <el-form-item label="商品版块名称：" prop="cname">
                <el-input v-model="item.cname"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button type="primary" size="medium">确认修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import mytime from "../../../../../utils/datetime";
    import {getItemById} from "../../../../../api/item";
    import {getCookie} from "../../../../../utils/myCookie";

    export default {
        name: "ProductInfoDetail",
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                active: 0,
                item: {
                    'id': '',
                    'title': '',// 商品名称
                    'sellPoint': '',// 商品描述
                    'price': '',// 商品价格
                    'num': '',// 库存
                    'limitNum': '',// 限制数量
                    'detail': '',// 商品图片和样式
                    'image': '',// 商品图片路径
                    'cid': '',// 商品所在的板块id
                    'cname': '',// 商品所在的版块名称
                    'status': '',// 商品状态码
                    'created': mytime.gettime(),// 创建时间
                    'updated': mytime.gettime()// 更新时间
                },
                rules: {
                    title: {required: true, message: '请输入商品名称', trigger: 'blur'},
                    sellPoint: {required: true, message: '请输入商品描述', trigger: 'blur'},
                    price: {required: true, message: '请输入商品价格', trigger: 'blur'},
                    num: {required: true, message: '请输入库存', trigger: 'blur'},
                    limitNum: {required: true, message: '请输入限制数量', trigger: 'blur'},
                    detail: {required: true, message: '请输入商品图片和样式', trigger: 'blur'},
                    image: {required: true, message: '请输入商品图片路径', trigger: 'blur'},
                    cid: {required: true, message: '请输入商品所在的板块id', trigger: 'blur'},
                    cname: {required: true, message: '请输入商品所在的版块名称', trigger: 'blur'},
                    status: {required: true, message: '请输入商品状态码', trigger: 'blur'},
                    // created: {required: true, message: '请输入创建时间', trigger: 'blur'},
                    // updated: {required: true, message: '请输入更新时间', trigger: 'blur'},
                },
                dialogImageUrl: '',//图片上传
                dialogVisible: false
            };
        },
        created() {
            getItemById(this.$route.query.id).then(response=>{
                console.log('获取得商品信息', response.data.result.image)
                this.item = response.data.result;
            });
        },
        computed: {},
        watch: {},
        methods: {
            //添加商品
            itemAdd(formName) {

            },
            //图片上传
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>

<style scoped>
</style>
